<template>
  <div class="body">
    <div class="navBar">
      <NavBar title="绩效系统" :icon="true" router="/"></NavBar>
    </div>

    <div v-if="show">
      <div style="height:100%;width:100%;overflow:auto">
        <div class="collapse">
          <div>
            <van-collapse v-model="activeNames" accordion>
              <div class="box" v-for="(item, index) in teacherArr" :key="index">
                <van-collapse-item :name="index" is-link>
                  <div slot="title">
                    <div class="label">标题：{{item.标题}}</div>
                    <div class="describe">
                      <div>类别：{{item.cate}}</div>
                      <div>证明文件共有： {{item.证明文件 ? item.证明文件.length : 0}} 个</div>
                    </div>
                  </div>
                  <div class="upload">
                    <el-upload
                      class="upload-demo"
                      :action="dataUrl"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      :on-success="onSuccess"
                      multiple
                      :limit="limits"
                      :on-exceed="handleExceed"
                      :file-list="item.证明文件"
                    >
                      <el-button size="small" type="primary" @click="upDate(item)">点击上传</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                  </div>
                </van-collapse-item>
              </div>
            </van-collapse>
          </div>
        </div>
      </div>
    </div>

    <van-dialog
      v-model="show1"
      :show-cancel-button="false"
      @confirm="confirmOK"
      :close-on-click-overlay="false"
      :show-confirm-button="fileName != ''"
    >
      <van-cell-group>
        <van-field v-model="fileName" placeholder="请输入文件名" required clearable label="文件名" />
      </van-cell-group>
    </van-dialog>

    <div v-if="!show">
      <div class="collapse">
        <SelectCollege></SelectCollege>
      </div>
    </div>

    <van-tabbar v-model="active" fixed @change="selectTabbar">
      <van-tabbar-item icon="user-o">个人</van-tabbar-item>
      <van-tabbar-item icon="newspaper-o">全校</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar/navBar'
import SelectCollege from './selectCollege'
import Qs from 'qs'
let Base64 = require('js-base64').Base64
export default {
  components: {
    NavBar,
    SelectCollege
  },
  name: 'My',
  data () {
    return {
      name: '朱小平',
      active: 0,
      activeNames: '0',
      show: true,
      number: 10559,
      teacherArr: [],
      dataUrl: '',
      show1: false,
      fileName: '',
      resFileName: '',
      resUrl: '',
      nowUpdateItem: {},
      nowUpdateItemIng: {},
      limits: 10
    }
  },
  async created () {
    
  },
  methods: {
    uploading (e) {
      e = e || window.event;
      if (e.stopPropagation) { //W3C阻止冒泡方法  
        e.stopPropagation();
      } else {
        e.cancelBubble = true; //IE阻止冒泡方法  
      }
      this.$router.push("/imageUpload")
    },
    selectTabbar () {
      if (this.active == 1) {
        this.show = false
      } else {
        this.show = true
      }
    },
    getTeacher () {
      console.log(this.number);

      this.$axios({
        method: 'get',
        url: '/api/v1/Performance',
        params: {
          query: {
            '参与教师.number': this.number
          }
        }
      })
        .then(function (response) {
          console.log(response)
          this.teacherArr = response.data
          console.log(this.teacherArr);
          this.teacherArr.forEach(element => {
            if (element.证明文件 && element.证明文件.length > 0) {
              element.证明文件 = JSON.parse(element.证明文件)
            } else {
              element.证明文件 = []
            }
          });
        }.bind(this))
        .catch(function (error) {
          console.log(error)
        })
    },
    lookImages (element) {
      console.log(element);
      var url = element.url.replace('http://jixiao.gdit.edu.cn', '/mozilla');
      console.log(url);
      this.$router.push({ name: 'PDF', query: { url: Base64.encode(url) } })
    },
    handleRemove (file, fileList) {
      console.log(file, '点击');
      let data = this.teacherArr
      var dataItem = {}
      var index = 0
      data.forEach((el, i) => {
        if (el.证明文件) {
          el.证明文件.forEach((el2, j) => {
            if (file == el2) {
              dataItem = el
              index = j
            }
          })
        }
      })
      console.log(dataItem, index);
      dataItem.证明文件.splice(index, 1)
      var dataUpdata = JSON.parse(JSON.stringify(dataItem))
      dataUpdata.证明文件 = JSON.stringify(dataUpdata.证明文件)

      this.$axios({
        method: 'PUT',
        url: '/api/v1/Performance/' + dataUpdata._id,
        data: dataUpdata
      })
        .then(function (response) {
          console.log('succse了')
        }.bind(this))
        .catch(function (error) {
          console.log(error)
        })

    },
    handlePreview (file) {
      console.log(file);
      this.lookImages(file)
    },
    handleExceed (files, fileList) {
      this.$notify({
        message: `当前限制选择 10 个文件`,
        duration: 2000,
        background: '#f16464'
      });
    },
    beforeRemove (file, fileList) {
      return this.$dialog.confirm({
        title: '提示',
        message: `确定移除 ${file.name}？`
      })
    },
    onSuccess (response, file, fileList) {
      this.resUrl = 'http://jixiao.gdit.edu.cn/' + response
      console.log(this.resUrl);
      var name = file.name
      name = name.split('.')
      this.fileName = name[0]
      console.log(this.fileName);
      this.resFileName = response
      this.show1 = true
    },
    confirmOK () {
      if (!this.nowUpdateItem.证明文件) {
        this.nowUpdateItem.证明文件 = []
        this.nowUpdateItemIng.证明文件 = []
      }
      this.nowUpdateItem.证明文件.push({
        name: this.fileName,
        url: this.resUrl
      })
      this.nowUpdateItemIng.证明文件.push({
        name: this.fileName,
        url: this.resUrl
      })
      var data = this.nowUpdateItem
      console.log(data);
      this.nowUpdateItem.证明文件 = JSON.stringify(this.nowUpdateItem.证明文件)
      this.$axios({
        method: 'PUT',
        url: '/api/v1/Performance/' + this.nowUpdateItem._id,
        data: this.nowUpdateItem
      })
        .then(function (response) {
          console.log('succse了')
        }.bind(this))
        .catch(function (error) {
          console.log(error)
        })
    },
    upDate (item) {
      this.nowUpdateItemIng = item
      this.nowUpdateItem = JSON.parse(JSON.stringify(item))
      console.log(this.nowUpdateItem);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.body {
  overflow: hidden;
}
.collapse {
  margin-bottom: 55px;
  margin-top: 46px;
}
.van-cell__value {
  color: blue;
}
.label {
  font-size: 0.9rem;
  font-weight: bold;
}
.describe {
  font-size: 0.8rem;
  color: rgb(172, 167, 167);
}
.uploading {
  color: #1c5697;
  font-weight: bold;
}
.bottom {
  display: flex;
  justify-content: space-between;
}
.box {
  margin-bottom: 0.4rem;
}
</style>
